<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>

    .box {
        display: flex;
        justify-content: space-around;
        align-items: flex-end;

        width: 1000px;
        height: 600px;
        background-color: pink;
        border-left: 1px solid black;
        border-bottom: 1px solid black;

        margin: 100px auto;
    }

    .box .quarter {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 100px;
        background-color: yellow;
        text-align: center;
    }

    .box .quarter span {
        margin-top: -20px;
    }

    .box .quarter p {
        margin-bottom: -22px;
    }

</style>

<body>


<script>

    let quarterData = []
    for (let i = 1; i <= 4; i++) {
        let data = prompt('请输入4个季度的数据')
        quarterData.push(data)
    }

    document.write(`<div class="box">`)
    for (let i = 0; i < quarterData.length; i++) {
        document.write(`
            <div class="quarter" style="height: ${quarterData[i]}px">
              <span>${quarterData[i]}</span>
              <p>第${i + 1}季度</p>
            </div>
        `)
    }
    document.write(`</div>`)

</script>
</body>
</html>